<template>
  <div>
    <h3>======watch的使用&computed=======</h3>
    <h4>普通watch用法</h4>
    <i>说明:<span class="myred">可以监听data中的属性,或者是路由,每当属性值发生改变,或者路由改变都能触发这个监听函数</span></i>
    <div>
      <p>FullName: 来自于watch&nbsp;&nbsp;{{ fullName }}</p>
      <!-- <p>FullName: 来自于computed{{ fullName111 }}</p> -->
      <p>FirstName: <input type="text" v-model="firstName" /></p>
      <!-- immediate watch开始 -->
      <h5>immediate(因美嘚特)-watch用法:初始化监听</h5>
      <i>说明:<span class="myred">页面初始化执行一次监听函数</span></i>
      <div>
        <p>immediateFullName: {{ immediateFullName }}</p>
        <p>FirstName: <input type="text" v-model="immediateFirstName" /></p>
      </div>

    </div>

    <!-- 深度监听开始 -->
    <h5>deep-watch用法</h5>
    <i>说明:<span class="myred">监听引用类型属性的变换.需要使用深度监听deep:true形式,不过如果只是监听对象里面的某一个属性
        我更习惯使用字符串引起来"对象点属性"的方式,感觉性能稍微好一些
      </span></i>
    <div>
      <p>姓名: {{ deepobj.name }}</p>
      <p>身份证号: <input type="text" v-model="deepobj.cardID" /></p>

      <p>年龄: <input type="text" v-model="deepobj.age" /></p>

      <p>住址: <input type="text" v-model="deepobj.address" /></p>
    </div>
    <h1>=================computed=========================</h1>
    <i>说明:<span class="myred">computed是一个计算属性,一般是多对一的关系.根据多个响应式数据的变化得到一个结果值用computed,一般是使用
        它的返回值的.computed是有缓存的,而且不能和data里面的属性同名
      </span></i>
    <span>computedFullName:{{ computedFullName }}</span>
  </div>
</template>

<script>

export default {
  data () {
    return {
      fullName: "",
      firstName: "",//双向绑定的值
      lastName: "贼帅",
      // computedFullName: "",// 不能和computed重名



      immediateFirstName: "苏明",
      immediateLastName: "immediate好帅",
      immediateFullName: "",

      // 深度监听使用的属性
      deepobj: {
        name: "suming",
        age: "",
        address: "",
        cardID: ""
      },
      carid: "370784"
    }
  },
  computed: {
    computedFullName () {


      return this.firstName + " &" + this.lastName;
    }
  },
  methods: {

  },
  watch: {
    // 监听的函数名,是data里面的一个属性名,只要这个值改变了.就能触发函数
    firstName (newName, oldName) {
      console.log("你看我普通watch.初始化不先走一遍", newName, oldName)

      this.fullName = newName + " " + this.lastName;
    },

    immediateFirstName: {
      handler (newName, oldName) {
        console.log("你看我.初始化先走一遍")
        this.immediateFullName = newName + " " + this.immediateLastName;
      },
      // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
      immediate: true
    },



    // 测试deep
    // deepobj () {
    //   console.log("直接监听对象我不打印") //兼听不到引用类型里面值的变换
    // },
    // deepobj: {
    //   handler (newName, oldName) {
    //     console.log('引用类型写成深度监听的方式才能被触发');
    //     let currentYear = new Date().getFullYear();
    //     let userBirsday = newName.cardID.slice(6, 10)
    //     console.log(currentYear, newName, userBirsday)
    //     if (userBirsday.length > 3) {
    //       this.deepobj.age = currentYear - userBirsday
    //     }
    //   },
    //   // immediate: true,  //这里也可以同时加这个属性
    //   deep: true
    // },
    "deepobj.cardID": {
      handler (newName, oldName) {
        console.log('我这里注销上面的deepobj监听之后,只监听cardId的变换');
        let currentYear = new Date().getFullYear();
        let userBirsday = newName.slice(6, 10)
        console.log(currentYear, newName, userBirsday)
        if (userBirsday.length > 3) {
          this.deepobj.age = currentYear - userBirsday
        }
      },
      // immediate: true
    }
  },

  created () {
    setTimeout(() => {

      Promise.resolve().then(() => {
        console.log(22)
      })
    }, 50)


    setTimeout(() => {
      console.log(1)
      Promise.resolve().then(() => {
        console.log(2)
      })
      Promise.resolve().then(() => {
        console.log(3)
      })
    }, 20)


  }
}
</script>
<style scoped></style>
